<script setup>
import {
  defineComponent,
  reactive,
  toRefs,
  ref,
  computed,
  nextTick,
  watch,
  h,
  onMounted,
} from "vue";

import {
  DeleteOutlined,
  CheckCircleOutlined,
  LeftOutlined,
  EditOutlined,
  ExclamationCircleOutlined,
  PicCenterOutlined,
  UploadOutlined,
  DownloadOutlined,
  DownOutlined,
  SoundOutlined,
  LoadingOutlined,
} from "@ant-design/icons-vue";
import { useRouter, useRoute } from "vue-router";
import durationSettingModal from "./durationSettingModal.vue"; //时长设置弹窗
import materialLibrary from "./materialLibrary.vue";
import { message } from "ant-design-vue";
// 预览视频弹窗
// import ViewVideoModel from "./ViewVideoModel.vue";
import ViewVideoModel from "@/views/shotstack/MixedCutPlatforms/mixedCutCreat/components/ViewVideoModel.vue";

// 工具函数
import { millisToHoursMinutesSeconds } from "../../utools/index.js";
// 上传文件弹窗
import UploadFileModal from "@/views/shotstack/MaterialCenter/modules/UploadFileModal.vue";
// 素材库
import ChooseMaterial from "@/views/shotstack/EditingCenter/modules/bottomSet/components/chooseMaterial.vue";
import newChooseMaterial from "@/views/shotstack/EditingCenter/modules/bottomSet/components/newChooseMaterial.vue";
import request from "@/common/utils/request";
import _ from "lodash";
import populaMaterial from "./populaMaterial.vue";

// 每一个卡片组件
import Cart_item from "./Component/Cart_item.vue";
// 仓库
import { useStore } from "vuex";
// 生成随机id
import { nanoid } from "nanoid";

const router = useRouter();
const route = useRoute();

const emit = defineEmits([
  "openSubtitledubbingDrawer",
  "openSettitleDrawer",
  "updateName",
  "openAicreateImg:data",
  "openAicreateImg:data",
]);

const props = defineProps({
  itemData: {
    type: Object,
    default() {
      return {};
    },
  },
  explableData: {
    type: Array,
  },
  targetIndex: {
    type: Number,
  },
  /** 文生图需要的模型id
   *  modelId
      feature_id,
   */
  ai_requestData: {
    type: Object,
    default() {
      return {};
    },
  },
});

const state = reactive({
  isGobackModal: false,
  iptShow: false, //控制镜头组输入框显示
  // materialName: "", //镜头组名称
  showImage: false, //控制查看图片弹窗显示隐藏
  materiallibrary: null, //新素材库弹窗实例
  materialVisible: false, //控制上传文件弹窗显示隐藏
  currentFolder: {}, //上传素材类型
  materiallibraryShow: false, //控制老系统素材库弹窗显示隐藏
  viewImgInfo: null, //弹窗图片信息
  // visible: false, // 智能生图下拉菜单开关
  visibleType: "", // select 为选择增加或者编辑场景 add 为增加场景 edit 为编辑场景
  textareaText: "",
  newChooseMaterialShow: false,
  // 当前高亮的ai图片
  // selectAi_img: "",
});

const PopulaMaterial = ref(null); //热门素材导入组件实例

const durationSettingmodal = ref(null); //设置视频原始时长组件组件实例

// ai配图开关
const ai_mapping = computed({
  get() {
    return VideoMashup.value?.ai_mapping;
  },
});

// 选择 ai图片
const selectAiImg = (item) => {
  // 不是ai生图 退出
  if (!item?.scene_des) return;
  state.selectAi_img = state.selectAi_img == item.id ? "" : item.id;
};

/**
 * 当前选择的比例
 * 0 9:16
 * 1 16:9
 * 2 1:1
 * 3 自定义
 */
const proportion = computed({
  get() {
    return VideoMashup.value.proportion;
  },
});

// const isActive = (item) => {
//   if (!item?.id) return false;
//   if (state.selectAi_img == item.id) return true;
// };

// 模板广场页面带过来的 id
const queryData = computed(() => {
  return {
    viewType: route.query?.viewType, // 1模板详情, 2混剪详情
  };
});

const closeNewChooseMaterial = () => {
  state.newChooseMaterialShow = false;
};

// 标题
const isName = computed({
  get() {
    return props.itemData.name;
  },
  set(val) {
    emit("updateName", val);
  },
});
// 仓库
const store = useStore();
// 仓库中的混剪数据
const VideoMashup = computed(() => {
  return store.state.shotstack.VideoMashup;
});

// template ai生成图片 是否运行轮询
const TemplateAiCreatSwitch = computed({
  get() {
    return store.state.shotstack.TemplateAiCreatSwitch;
  },
  set(val) {
    store.commit("SET_TemplateAiCreatSwitch_SWITCH", val);
  },
});
const detailDataInfo = computed(() => {
  return JSON.parse(JSON.stringify(props.explableData));
});
// 获取组件列表实例
const itemCardList = ref(null);

// 计算属性 获取展示的项和折叠的项
const showListCart = computed(() => {
  const itemCardListWidth = itemCardList.value?.offsetWidth;
  const list = props.itemData.material_list;
  if (!itemCardListWidth || !props.itemData.material_list) {
    return {
      foldArr: [],
      showContent: [],
      itemCardListWidth,
    };
  } else {
    // 计算容器能够完全展示多少个卡片
    const cardWidth = 90; // 假设卡片宽度固定为90px
    const maxVisibleCards =
      Math.floor((itemCardListWidth - 124) / cardWidth) - 1;
    // 分割数组，前maxVisibleCards个元素用于展示，剩下的放在foldArr中
    const showContent = list.slice(0, maxVisibleCards);
    const foldArr = list.slice(maxVisibleCards);
    // foldArr.push(showContent[showContent.length - 1]);
    const data = { showContent, foldArr, itemCardListWidth };
    return data;
  }
});

// 需要获取素材的异步队列
const promiseArr = ref([]);

// 图片类型, 且没有素材地址, 需要轮询获取素材
const needCreatAi_img = computed(() => {
  return (
    props.itemData?.material_list.filter((ele) => {
      return ele.scene_type === "image" && !ele.material_url;
    }) || []
  );
});

onMounted(() => {
  // 判断有咩有需要生成ai图片的项
  needCreatAi_img.value.length &&
    needCreatAi_img.value.forEach((ele) => {
      let find = promiseArr.value.find((i) => i?.id == ele.id);
      // 如果没找到
      if (!find) {
        // 当前项的loding 变为true
        ele.creatLoading = true;
        // 打开ai轮询开关
        !TemplateAiCreatSwitch.value && (TemplateAiCreatSwitch.value = true);
        // 往异步队列添加一项
        promiseArr.value.push({
          id: ele.id,
          promise() {
            let size = "";
            if (proportion.value == 0) {
              size = "9:16";
            } else if (proportion.value == 1) {
              size = "16:9";
            } else if (proportion.value == 2) {
              size = "1:1";
            }
            const getImgParams = {
              feature: "text2image",
              scene_des: ele.scene_des,
              text_split_id: ele.from_id,
              // 携带两个模型的id
              modelId: props.ai_requestData.modelId,
              feature_id: props.ai_requestData.feature_id,
              // 讯飞需要携带宽高
              width: VideoMashup.value.width,
              height: VideoMashup.value.height,
              size,
            };
            new Promise(async (resolve, reject) => {
              try {
                getAiImgFn.fn(getImgParams, ele, resolve, reject);
              } catch {
                creatAiImg_loading.value = false;
                ele.creatLoading = false;
                message.error("图片生成失败!");

                // reject(new Error("文生图失败!"));
              }
            });
          },
        });
        // 执行刚刚添加的异步队列
        getAiImgFn.flage &&
          promiseArr.value[promiseArr.value.length - 1].promise();
      }
    });
});

// const spanClisk = () => {
//   console.log(props.targetIndex, 'index');
//   openSubtitledubbingDrawer()
//   console.log();
// }

// 获取ai图片
let getAiImgFn = reactive({
  flage: true,
  index: props.targetIndex,
  changeFlage: function () {
    getAiImgFn.flage = false;
  },
  changeIndex: function () {
    console.log(props.targetIndex, "index");
  },
  fn: async function (getImgParams, ele, resolve, reject) {
    // 判断是否被销毁, 如果销毁停止请求
    if (!TemplateAiCreatSwitch.value || !getAiImgFn.flage) {
      return;
    }
    try {
      let timeId = "";
      const res = await request.get(
        "work_ai",
        "/user/shotstack/textXf/image",
        getImgParams
      );
      console.log(res, " 文生图发起请求");

      // 轮询结束
      // if (res.result.process == "done") {
      // 轮询结束
      if (
        !Object.keys(res).find((ele) => ele == "task_id") &&
        res?.result?.process == "done"
      ) {
        timeId && clearTimeout(timeId);
        if (res.result.message != "") {
          message.warning(res.result.message);
        }
        const targetData =
          VideoMashup.value.resource_data[props.targetIndex].material_list;
        let targetIndex = targetData.findIndex((i) => i.id == ele.id);
        if (
          Object.keys(res.result).some((e) => e == "aiImage") &&
          res.result.aiImage != ""
        ) {
          // 存放链接
          targetData[targetIndex].material_url = res.result.aiImage;
          // 存放 文件大小
          targetData[targetIndex].material_size = res.result.material_size;
          // 存放后缀
          targetData[targetIndex].material_extension =
            res.result.material_extension;
          // 存放路径地址
          targetData[targetIndex].material_path = res.result.material_path;
        } else {
          // 生成失败
          if (res.result.message != "") {
            message.warning(res.result.message);
          }
        }
        targetData[targetIndex].creatLoading = false;
        store.dispatch("SetVideoMashupItem", VideoMashup.value);
        resolve(res.result.aiImage);
      } else {
        if (!TemplateAiCreatSwitch.value || !getAiImgFn.flage) {
          return;
        }
        timeId = setTimeout(() => {
          // 没有task_id, 补上task_id
          if (!Object.keys(getImgParams).find((ele) => ele == "task_id")) {
            getImgParams.task_id = res.task_id;
          }
          this.fn(getImgParams, ele, resolve, reject);
          console.log(
            props.targetIndex,
            props.itemData.material_list,
            "视频组数据确认123123123"
          );
        }, 3000);
      }
    } catch (error) {
      // 错误删除当前项
      const targetData =
        VideoMashup.value.resource_data?.[props.targetIndex]?.material_list;
      let targetIndex = targetData.findIndex((i) => i.id == ele.id);
      // 删除当前的ai空图片
      // targetData.splice(targetIndex, 1);
      targetData[targetIndex].creatLoading = false;
      store.dispatch("SetVideoMashupItem", VideoMashup.value);
      reject(error);
      // console.log(error, '错误信息');
    }
  },
});

// 素材时长
const totalTime = computed(() => {
  if (props.itemData.material_list.length) {
    const time = props.itemData.material_list.reduce((pre, cur) => {
      return pre + Math.floor(cur.material_duration);
    }, 0);
    return millisToHoursMinutesSeconds(time) == "00:00:00"
      ? "00:00:01"
      : millisToHoursMinutesSeconds(time);
  } else {
    return "00:00:00";
  }
});
// 获取当前视频组配置的文本和剩余组数
const videoGroupText = computed(() => {
  const tab_id = VideoMashup.value.resource_data[props.targetIndex]?.tab_id;

  const index = props.itemData.tts_config.findIndex((ele) => {
    return (
      ele.tab_id == tab_id &&
      ele.subtitle.some((i) => !!i.text.trim() && i.text.trim() !== "\n")
    );
  });
  let text = "";
  let atherNum = "";
  if (index !== -1) {
    text = props.itemData.tts_config[index].subtitle
      .map((ele) => ele.text)
      .join("");
    atherNum = props.itemData.tts_config[index].subtitle.length;
  }
  let title = "";
  if (props.itemData?.text_config?.[0]?.text.length > 0) {
    title = props.itemData.text_config[0].text;
  }
  return {
    text: text || "字幕与配音",
    atherNum,
    title: title || "文字标题",
  };
});

// 获取当前组的视频和img结束时间
const getEndTime = computed(() => {
  let targetData = VideoMashup.value.resource_data[props.targetIndex];
  let activeItem = null;
  if (targetData.tab_id == "text") {
    activeItem = targetData.tts_config.filter((ele) => ele.tab_id == "text")[0];
    const time = activeItem.subtitle
      .map((ele) => ele.duration)
      .reduce((total, item) => {
        return (total += +item);
      }, 0);
    console.log(
      time.toFixed(0),
      "time.toFixed(0)time.toFixed(0)time.toFixed(0)time.toFixed(0)time.toFixed(0)"
    );
    return time.toFixed(0);
  } else if (targetData.tab_id == "audio") {
    activeItem = targetData.tts_config.filter(
      (ele) => ele.tab_id == "audio"
    )[0];
    return +(activeItem.duration !== "" ? activeItem.duration.toFixed(0) : 0);
  }
});

// 文字标题数据的回显
const videoTextTitle = computed(() => {
  //  console.log(VideoMashup.value, '文字标题数据的回显文字标题数据的回显');
});

// 判断是否禁用全局文字标题
const disableVideoSettings = computed(() => {
  return VideoMashup.value.global_text_config.type;
});

// 判断是否禁用字幕与配音
const disableFontSettings = computed(() => {
  return VideoMashup.value.global_tts_config.type;
});

// 通知父组件 打开字幕与配音编辑抽屉
const openSubtitledubbingDrawer = () => {
  // 全局禁用字幕
  if (disableFontSettings.value) return;
  emit("openSubtitledubbingDrawer", props.targetIndex);
};
// 通知父组件打开文字标题编辑抽屉
const openSettitleDrawer = () => {
  if (disableVideoSettings.value == 1) return;
  console.log("文字标题点击了");
  emit("openSettitleDrawer", props.targetIndex);
};
const durationSetHandle = (type) => {
  durationSettingmodal.value.showModal(type);
};
// 素材库导入
const materialUploadHandle = () => {
  // state.materiallibrary.showModal();
  // state.newChooseMaterialShow = true
  state.materiallibraryShow = true;
};
// 每个标题的change事件, 提示用户不等你超过20个字符
const inputChnage = (e) => {
  nextTick(() => {
    isName.value.length > 20 &&
      (() => {
        // 阻止输入的额外字符
        isName.value = isName.value.slice(0, 20);
        message.warning("镜头组名称长度不能超过 20");
      })();
  });
};
// 输入框获取焦点, 存储旧的值
const oldVal = ref("");
const iptFocus = (ev) => {
  oldVal.value = isName.value;
};
const iptRef = ref(null);
const inputEdit = () => {
  state.iptShow = true;
  nextTick(() => {
    iptRef.value && iptRef.value.focus();
  });
};
// 输入框失去焦点, 判断新值是否符合规则
const iptBlur = (ev) => {
  if (isName.value.trim().length <= 0) {
    isName.value = oldVal.value;
    // emit('updateName', oldVal.value)
    message.warning("镜头组名称不能为空!");
  } else {
    // emit('updateName', isName.value)
  }
  state.iptShow = false;
};

// 预览图片或视频
const videoDialog = ref(null);
const toView = (data) => {
  console.log(data);
  // 查看图片
  if (data.scene_type == "image") {
    state.viewImgInfo = data;
    state.showImage = true;
  } else if (data.scene_type == "video") {
    // 查看视频
    videoDialog.value && videoDialog.value.showModal(data);
    // videoDialog.value.showModal({
    //   url: data.material_url,
    //   material_duration: data.material_duration,
    // });
  }
};

// 删除图片
const delItem = (item) => {
  console.log(item, "item-------");
  let list = JSON.parse(
    JSON.stringify(
      VideoMashup.value.resource_data[props.targetIndex]?.material_list
    )
  );

  const index = list.findIndex((ele) => ele.id == item.id);
  if (index !== -1) {
    VideoMashup.value.resource_data[props.targetIndex]?.material_list?.splice(
      index,
      1
    );
  }

  // 如果没有数据, 用示例素材替换
  if (
    detailDataInfo.value &&
    detailDataInfo.value?.[props.targetIndex] &&
    VideoMashup.value.resource_data[props.targetIndex].material_list.length <= 0
  ) {
    if (detailDataInfo.value) {
      let exchangeData =
        detailDataInfo.value[props.targetIndex] &&
        detailDataInfo.value[props.targetIndex].material_list.filter(
          (item) => item.system_default == 1
        );
      VideoMashup.value.resource_data[props.targetIndex].material_list =
        exchangeData;
    }
  }
  //  更新仓库
  store.dispatch("SetVideoMashupItem", VideoMashup.value);
  setTimeout(() => {
    console.log(VideoMashup.value.resource_data, "更新仓库---删除了图片或视频");
  }, 500);
  message.success("删除成功");
};
// 本地上传
const localUploadHandle = () => {
  state.materialVisible = true;
  state.currentFolder = {};
  state.showMaterial = true;
};
// 关闭本地上传弹窗
const closeMaterial = (e) => {
  state.materialVisible = false;
};
// 素材导入回调
const closeChooseMaterial = (data, key) => {
  if (!data) {
    state.materiallibraryShow = false; //关闭弹窗
    return;
  }
  console.log(key, "keykeykeyyeyeyeyeye");
  // state.newChooseMaterialShow = false; //关闭弹窗
  state.materiallibraryShow = false; //关闭弹窗
  console.log(state.materiallibraryShow, "keykeykeyyeyeyeyeye");

  if (props.itemData.material_list.length >= 50) {
    return message.warning("单视频组最多可添加50个素材");
  } else if (
    data.length >= 1 &&
    props.itemData.material_list.length + data.length > 50
  ) {
    message.warning("单视频组最多可添加50个素材, 已自动去除多余素材");
    const sliceNum = 50 - props.itemData.material_list.length; // 计算可以添加的素材数量
    const existingIds = props.itemData.material_list.map((item) => item.id);
    // 遍历data，只添加未在existingIds中出现的素材
    let finds = data.filter(
      (ele) => !existingIds.some((i) => i == `${ele[key]}_${ele.id}`)
    );
    finds = finds.slice(0, sliceNum);
    data = finds;
  }

  // 获取开始和结束时间
  const getTime = (type, self) => {
    // 现在不会走到这里
    if (type == "start") {
      if (props.itemData.material_list.length) {
        let time = 0;
        props.itemData.material_list.forEach((ele) => {
          time += ele.material_duration;
        });
        return time;
      } else {
        return 0;
      }
    } else {
      const targetConfig =
        VideoMashup.value.resource_data[props.targetIndex].time_strategy;
      // 图片的结束时间
      if (self.scene_type == "image") {
        // 原始时长, 未做限制 默认3000
        if (targetConfig && targetConfig.type == 0) {
          return 3000;
        } else if (targetConfig && targetConfig.type == 3) {
          //固定时间设置
          return +targetConfig.fixed_time;
        } else if (targetConfig && targetConfig.type == 2) {
          // 随音频智能截取
          return +getEndTime.value;
        } else if (targetConfig && targetConfig.type == 1) {
          // 随音频自动变速
          return +getEndTime.value;
        }
      } else {
        // 视频等其他的结束时间
        if (targetConfig && targetConfig.type == 0) {
          // 原始时长设置
          return +self.material_duration;
        } else if (targetConfig && targetConfig.type == 3) {
          // 固定时间设置 => 设置时间大于自身时长 使用自身时长
          if (!(targetConfig.fixed_time > self.material_duration)) {
            return +targetConfig.fixed_time;
          } else {
            return +self.material_duration;
          }
        } else if (targetConfig && targetConfig.type == 2) {
          // 随音频智能截取
          if (!(+getEndTime.value > self.material_duration)) {
            return +getEndTime.value;
          } else {
            return +self.material_duration;
          }
        } else if (targetConfig && targetConfig.type == 1) {
          // 随音频自动变速
          return +getEndTime.value;
        }
      }
    }
  };

  let filterList = data?.map((item, index) => {
    return {
      // 文件
      material_url: item.material_url,
      // 文件名称
      material_name: item.material_name,
      // 素材类型
      scene_type: item[key],
      // id
      org_id: item.org_id,
      // 文件时长
      material_duration: item.material_duration,
      // 文件后缀
      material_extension: item.material_extension,
      // 文件大小
      material_size: item.material_size,
      // 素材路径
      material_path: item.material_path,
      // 文件路径
      url: item.material_url,
      // 开始和结束时间
      start_time: 0,
      end_time: 0,
      id: `${item[key]}_${item.id}`,
      // id: item.id,
    };
  });
  if (!filterList?.length) return;

  let showMsg = false;
  filterList.forEach((item) => {
    // 去重
    const index = props.itemData.material_list.findIndex(
      (existingItem) => existingItem.id == item.id
    );
    if (index == -1) {
      props.itemData.material_list.push({
        ...item,
        start_time: 0,
        end_time: getTime("end", item),
        material_duration:
          item.scene_type == "image" ? 3000 : item.material_duration,
      });
    } else {
      showMsg = true;
    }
  });

  if (showMsg) message.info("已为您自动去除重复素材");

  // 更新vuex对应的material_list
  VideoMashup.value.resource_data[props.targetIndex].material_list =
    props.itemData.material_list.filter((item) => item.system_default !== 1);
  // 更新仓库
  store.dispatch("SetVideoMashupItem", VideoMashup.value);
  setTimeout(() => {
    console.log(VideoMashup.value.resource_data, "更新了仓库中的素材");
  }, 500);
};

// 热门素材导入
const popularMaterialHandle = () => {
  PopulaMaterial.value.showModal();
};

// 删除镜头组
const deleteGroupHandle = () => {
  if (VideoMashup.value.resource_data.length <= 1) {
    message.error("至少保留一个镜头组");
    return;
  }
  if (needCreatAi_img.value.length) {
    message.error("图片生成中,请稍后再删除!");
    return;
  }
  // 关闭此项的轮询开关
  // getAiImgFn = null
  getAiImgFn.changeFlage();
  VideoMashup.value.resource_data.splice(props.targetIndex, 1);
  console.log(props.targetIndex, "点击了当前镜头组");
  // 更新仓库
  store.dispatch("SetVideoMashupItem", VideoMashup.value);
  setTimeout(() => {
    console.log(VideoMashup.value.resource_data, "更新仓库---删除了镜头组");
  }, 500);
  message.success("删除成功");
};

const volum = computed({
  get() {
    return VideoMashup.value.resource_data[props.targetIndex].volume;
  },
  set(val) {
    VideoMashup.value.resource_data[props.targetIndex].volume = val;

    store.dispatch("SetVideoMashupItem", {
      key: "resource_data",
      value: VideoMashup.value.resource_data,
    });
  },
});
// 时长设置
const setVideoTime = computed(() => {
  switch (props.itemData.time_strategy?.type) {
    case 2:
      return "随音频，视频智能截取";
    case 0:
      return "视频原始时长";
    case 1:
      return "随音频，视频自动变速";
    case 3:
      return `固定时长，智能去重 ${
        props.itemData.time_strategy?.fixed_time / 1000 || 0
      }s`;
    default:
      return "视频原始时长";
  }
});
// 设置混剪模式
const setMixedShearType = computed(() => {
  switch (props.itemData?.type) {
    case 0:
      return "单镜头混剪";
    case 2:
      return "智能混剪";
    default:
      return "单镜头混剪";
  }
});

const smartCreat = () => {
  if (ai_mapping.value != 1) {
    message.warning("未开启AI配图功能");
    return;
  }
  // state.visibleType = 'select'
  emit("openAicreateImg", props.targetIndex);
};

// 重新绘制, 打开ai生图
const repaint = () => {
  emit("openAicreateImg", props.targetIndex);
};

const openAicreateImg = () => {
  emit("openAicreateImg", props.targetIndex);
};

// 修改此项的开始和结束时间
const changeVideoData = (data) => {
  const findTarget = VideoMashup.value.resource_data[
    props.targetIndex
  ].material_list.find((ele) => ele.id == data.id);

  // 修改此项的开始和结束时间
  if (!!findTarget) {
    findTarget.start_time = data.start_time;
    findTarget.end_time = data.end_time;
  }
  store.dispatch("SetVideoMashupItem", VideoMashup.value);
};

// onBeforeUnmount(() => {
//   // debugger
//   getAiImgFn.changeFlage()
//   store.commit("SET_TemplateAiItemSwitch_SWITCH", {
//     id: props.targetIndex,
//     flage: false
//   });
// });
</script>

<template>
  <!-- class="item-card" -->
  <div class="content_box">
    <div class="item_card_header">
      <!-- 抓手 - 匿名插槽 -->
      <slot name="default"></slot>
      <!-- {{ itemData.material_list }} -->
      <!-- 头部输入框 -->
      <div class="header_box">
        <div class="header_left">
          <div class="header_top">
            <div v-if="!state.iptShow">
              <span>{{ isName }}</span>
              <a-tooltip>
                <template #title>编辑</template>
                <edit-outlined @click="inputEdit" />
              </a-tooltip>
            </div>
            <div v-else>
              <!-- :maxlength="20" -->
              <a-input
                v-model:value="isName"
                @pressEnter="state.iptShow = false"
                @blur="iptBlur($event)"
                @change="inputChnage($event)"
                @focus="iptFocus($event)"
                ref="iptRef"
              ></a-input>
            </div>
          </div>
          <div class="header_bottom">
            <span style="font-size: 12px">
              素材数量 &nbsp;
              <a-tag style="font-size: 12px; line-height: 12px; padding: 2px">{{
                itemData.material_list.length
              }}</a-tag>
              素材总时长&nbsp;
              <a-tag style="font-size: 12px; line-height: 12px; padding: 2px">
                {{ totalTime }} {{ itemdata }}</a-tag
              >
            </span>
          </div>
        </div>

        <div class="header-right">
          <div class="header-bottom-btngroup">
            <a-popconfirm
              title="确定删除该镜头组?"
              ok-text="确定"
              cancel-text="取消"
              @confirm="deleteGroupHandle"
            >
              <span class="delete-btn"><delete-outlined />删除镜头组</span>
            </a-popconfirm>
            <span
              ><a-switch
                size="small"
                style="margin-right: 4px"
                v-model:checked="volum"
              />素材原声</span
            >
          </div>
        </div>
      </div>
    </div>

    <!-- 卡片主体部分 -->
    <div class="cart_list_box" ref="itemCardList">
      <!-- 上传的卡片 -->
      <div class="upload_box">
        <div class="upload_desc">
          <div style="font-size: 24px; font-weight: 600">+</div>
          <div>添加素材</div>
        </div>
        <div class="upload_img_mask">
          <span class="upload_img-local" @click="popularMaterialHandle"
            ><upload-outlined />热门素材</span
          >
          <span class="line"></span>
          <span class="upload_img-origin" @click="materialUploadHandle"
            ><download-outlined />素材库导入</span
          >
        </div>
      </div>
      <!-- 列表渲染的卡片 -->
      <div v-for="item in showListCart.showContent" :key="item.id">
        <Cart_item
          :item="item"
          @delItem="delItem"
          @toView="toView"
          @repaint="repaint"
          :viewMore="false"
        ></Cart_item>
      </div>

      <!-- 多余的数据只有当切割素材的数量大于1的时候才显示 -->
      <template v-if="showListCart.foldArr.length >= 1">
        <!-- 多余的只有一项, 和普通的卡片没有区别 -->
        <template v-if="showListCart.foldArr.length == 1">
          <Cart_item
            :item="showListCart.foldArr[0]"
            @delItem="delItem"
            @toView="toView"
            @repaint="repaint"
          ></Cart_item>
        </template>
        <!-- 多余的有多项, 第一个特殊处理, 其余的项放在折叠面板中 -->
        <template v-else>
          <!-- 第一个特殊处理 -->
          <Cart_item
            :item="showListCart.foldArr[0]"
            @delItem="delItem"
            @toView="toView"
            @repaint="repaint"
            :viewMore="true"
            :moreList="showListCart.foldArr"
          ></Cart_item>
        </template>
      </template>
    </div>

    <!-- 底部按钮 -->
    <div class="item-card-footer">
      <!-- 字体标题 -->
      <!-- 字幕与配音 -->
      <!-- <span @click="spanClisk"> -->
      <!-- {{ props.targetIndex, 'props.targetIndex' }} -->
      <!-- </span> -->
      <span
        @click="openSubtitledubbingDrawer"
        class="item-card-footer_btn"
        :class="{ disable_card_footer_btn: disableFontSettings == 1 }"
      >
        <sound-outlined
          v-show="!!videoGroupText.atherNum && +videoGroupText.atherNum !== 0"
          style="margin-right: 5px"
        />
        {{ videoGroupText.text }}
        <i
          size="small"
          v-show="!!videoGroupText.atherNum && +videoGroupText.atherNum !== 0"
          style="
            display: inline-block;
            border-radius: 3px;
            border-color: skyblue;
            margin-left: 3px;
          "
          >+{{ videoGroupText.atherNum }}</i
        >
      </span>

      <!-- 文字标题 -->
      <span
        class="item-card-footer_btn"
        :class="{ disable_card_footer_btn: disableVideoSettings == 1 }"
        style="margin: 0 5px"
        @click="openSettitleDrawer"
        >{{ videoGroupText.title }}</span
      >

      <span class="item-card-footer_btn" @click="durationSetHandle('timeSet')">
        {{ setVideoTime }}
        <down-outlined
      /></span>
      <span
        class="item-card-footer_btn"
        style="margin-left: 5px"
        @click="durationSetHandle('mixedShearMode')"
        >{{ setMixedShearType }}<down-outlined
      /></span>

      <!-- <span class="item-card-footer_btn" :class="{
        disable_card_footer_btn: ai_mapping != 1,
      }" style="margin-left: 5px; padding-left: 15px; padding-right: 15px" @click="smartCreat"
        v-if="queryData?.viewType == 2">
        AI生图
      </span> -->
    </div>
    <!-- 查看图片弹窗 -->
    <a-modal
      width="500px"
      v-model:visible="state.showImage"
      :title="state.viewImgInfo?.material_name"
      @ok="state.showImage = false"
      centered
    >
      <div style="display: flex; justify-content: center; align-items: center">
        <img
          style="width: 450px; max-height: 300px; object-fit: contain"
          :src="state.viewImgInfo?.material_url"
          alt=""
        />
      </div>
    </a-modal>
    <!-- 查看视频 -->
    <ViewVideoModel
      ref="videoDialog"
      @changeVideoData="changeVideoData"
    ></ViewVideoModel>
    <!-- 设置视频原始时长组件 -->
    <durationSettingModal
      ref="durationSettingmodal"
      :targetIndex="targetIndex"
    />

    <!-- <newChooseMaterial :isClip="false" :visible="newChooseMaterialShow" modelType="imgeVideo"
      @close="closeChooseMaterial($event, 'material_type')" /> -->

    <ChooseMaterial
      :haveTags="[
        {
          name: '网络素材',
          key: 'system_materials',
        },
        {
          name: 'AI生图',
          key: 'AI_materials',
        },
      ]"
      :isClip="false"
      material_type="video_image"
      :multiple="true"
      :visible="state.materiallibraryShow"
      :showContent="showListCart.showContent"
      :isvideoGroup="true"
      @openAicreateImg="openAicreateImg"
      @close="closeChooseMaterial($event, 'material_type')"
      :targetIndex="props.targetIndex"
    />
    <!-- 热门素材 -->
    <populaMaterial
      ref="PopulaMaterial"
      @updateMerial="closeChooseMaterial($event, 'scene_type')"
    />
  </div>
</template>

<style lang="less" scoped>
.content_box {
  @cart_bgc: #f1f3f5;

  //卡片的样式
  .material_item {
    // background-color: #000;
  }

  // 头部样式
  .item_card_header {
    color: #737a87;
    background: #fafbfc;
    padding: 20px;
    position: relative;

    .header_box {
      display: flex;
      justify-content: space-between;

      &:hover {
        & .header-right .delete-btn {
          visibility: visible;
          color: var(--ss-primary-6);
        }
      }
    }

    .header_top {
      font-weight: 600;
      line-height: 20px;
    }

    .header_bottom {
      display: flex;
      margin-top: 5px;
      color: var(--color-text-3);
      justify-content: space-between;
      align-items: center;
    }

    // 右侧删除按钮
    .header-right {
      margin-top: 16px;

      .header-bottom-btngroup {
        .delete-btn {
          font-size: 12px;
          margin-right: 10px;
          visibility: hidden;
          cursor: pointer;
        }
      }
    }
  }

  // 列表主体
  .cart_list_box {
    padding: 0 20px;
    display: flex;

    // 添加素材的卡片样式
    .upload_box {
      width: 84px;
      height: 120px;
      border-radius: 5px;
      position: relative;
      margin: 0 5px;

      &:hover {
        & .upload_img_mask {
          opacity: 1;
        }
      }

      .upload_img_mask {
        position: absolute;
        left: 0;
        top: 0;
        width: 84px;
        height: 114px;
        background: #f1f3f5;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        opacity: 0;

        .upload_img-local,
        .upload_img-origin {
          align-items: center;
          justify-content: center;
          display: flex;
          height: 48%;
          font-size: 12px;
        }

        .line {
          height: 1px;
          width: 80%;
          background: #dde2e9;
        }

        & span {
          cursor: pointer;
        }
      }

      // 鼠标触摸之前的描述文本
      .upload_desc {
        background: @cart_bgc;
        width: 84px;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
      }
    }
  }
}

// 底部样式
.item-card-footer {
  margin-top: 10px;
  padding: 20px;
  cursor: pointer;

  :deep(.ss-popover-inner-content) {
    padding: 0;
  }

  .smart_create {
    padding: 6px 12px;

    .smart_create_item {
      width: 100%;
      padding: 2px;
      cursor: pointer;

      &:hover {
        color: var(--ss-primary-5);
      }
    }

    .disable_smart_create_item {
      width: 100%;
      padding: 2px;
      cursor: pointer;
      color: #afafaf;

      &:hover {
        color: #9a9a9a;
      }
    }
  }

  // 智能生图输入提示词
  .smart_create_desc_box {
    width: 650px;
    padding: 12px 0;

    .title {
      padding: 0 12px 8px 12px;
      font-size: 14px;
      border-bottom: 0.5px solid #c7c7c7;
    }

    .desc_content {
      padding: 12px;
      padding-top: 0;
      margin-top: 14px;
    }

    .btn_box {
      display: flex;
      justify-content: flex-end;
      gap: 12px;
      padding: 0 12px;
    }
  }

  // 'margin-left': '5px',
  // display: 'inline-block',
  // 'max-width': '200px',
  // background:  selectAi_img == '' ? '#fafbfd' : '#f6f8fa',
  // padding: '5px',
  // border: '1px solid #dde2e9',
  // 'border-color': selectAi_img == '' ? '#dde2e9' : '#dde2e9',
  // color: selectAi_img == '' ? '#b4b4b4' : '#555555',
  // 'font-size': '12px',
  // 'border-radius': '5px',
  // overflow: 'hidden',
  // 'text-overflow': 'ellipsis',
  // 'white-space': 'nowrap',
  // cursor: selectAi_img == '' && 'not-allowed'

  .item-card-footer_btn {
    display: inline-block;
    max-width: 200px;
    background: #f6f8fa;
    padding: 5px;
    border: 1px solid #dde2e9;
    color: #555555;
    font-size: 12px;
    border-radius: 5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  // 禁用的样式
  .disable_card_footer_btn {
    color: #b4b4b4;
    background-color: #fafbfd;
    border-color: #dde2e9;
    cursor: not-allowed;
  }
}

.item_card_img:hover .upload_img {
  display: none;
}

.item_card_img:hover .upload_img_mask {
  visibility: visible;
}

.upload_img-local:hover,
.upload_img-origin:hover {
  color: #2878ff;
}
</style>
